<template>
  <div style="display: flex;">
    <!-- 714晚上极限拯救队友代码 -->
    {{ treeSelect }}
    {{ puncherArr }}
    {{ selectDepartment }}

    <div class="btn-left" style="width: 50%; border-right: 1px solid #F2F4FA;padding: 24px;">
      <div v-if="puncherMemberModal">
        <div class="btn-tit">部门</div>
        <div class="tag-btn" style="display: flex;margin: 10px 0 20px 0;flex-wrap: wrap;">
          <div  >
            <a-tag closable @close="delDepartment(item)" v-for="(item,index) in selectDepartment" :key="item.id" style="margin-bottom: 10px;">{{ item.nickName }}</a-tag>
          </div>
          <div v-if="puncherArr.length>0" class="clear" style="color: #4174FD;cursor: pointer;" @click="getDepartmentList=[]">清空</div>
          <div v-else style="color:#999999">暂无部门</div>
        </div>
        <div class="btn-tit">人员</div>
        <div class="tag-btn" style="display: flex;margin-top: 10px;flex-wrap: wrap;">
          <div>
            <a-tag closable @close="checkedPuncher.splice(index , 1)" v-for="(item,index) in checkedPuncher" :key="item" style="margin-bottom: 10px;">{{ JSON.parse(item).userName }}</a-tag>
          </div>
          <div v-if="checkedPuncher.length" class="clear" style="color: #4174FD;cursor: pointer;" @click="checkedPuncher = []">清空</div>
          <div v-else style="color:#999999">暂无部门</div>
        </div>
      </div>
      <div v-else>
        <div class="btn-tit">人员</div>
        <div class="tag-btn" style="display: flex;margin-top: 10px;flex-wrap: wrap;">
          <div v-for="(item,index) in checkedOwner" :key="item">
            <a-tag closable @close="checkedOwner.splice(index , 1)"  style="margin-bottom: 10px;">{{ JSON.parse(item).userName }}</a-tag>
          </div>
          <div v-if="checkedOwner.length" class="clear" style="color: #4174FD;cursor: pointer;" @click="checkedOwner = []">清空</div>
          <div v-else style="color:#999999">暂无人员</div>
        </div>
      </div>
    </div>
    <div style="padding: 24px;">
      <div v-if="puncherMemberModal">
        <a-tabs default-active-key="2">
          <a-tab-pane key="1">
            <span slot="tab">部门</span>
            <a-tree checkable v-model="treeSelect" :tree-data="departemntList" :replaceFields = "{
              children:'child',
              title:'name',
              key:'id'
            }" />
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab">人员</span>
            <a-tree checkable v-model="checkedPuncher" :tree-data="allTeacherList" />
          </a-tab-pane>
        </a-tabs>
      </div>
      <div v-else>
        <a-tree checkable v-model="checkedOwner" :tree-data="allTeacherList" />
      </div>
    </div>
  </div>
</template>
<script>
import {
  tree,
  allTeacherAndTree,
  allTeacherAndTreeP,
  calendarInfo,
  teacherList
} from '@/api/tree'
export default {
  data() {
    return {
      puncherMemberModal: true,
      ownerMemberModal: false,

      // 打卡者 ｜ 负责人
      puncherArr: [],
      ownerArr: [],
      departmentArr: [],

      treeSelect: [],
      departemntList: [],
      allTeacherList: [],
      // 选中项目
      checkedPuncher: [],
      checkedDepartment: [],

      selectDepartment: []
    }
  },
  created() {
    // 获取树数据
    tree({ parentId: 0}).then(response => {
      this.departemntList = response.data.list
      teacherList().then(response => {
        response.data.list.forEach(item => {
          item.obj = {
            userId: item.userId,
            userIndex: item.userIndex,
            userName: item.name,
            departmentId: item.departmentId
          }
          this.allTeacherList.push({
            title: item.name,
            key: JSON.stringify(item.obj),
          })
        })
      })
    })
  },
  computed: {
    // 存在且是最后一层，只显示最后一层部门
    // getDepartmentList () {
    //   console.log("222: ",this.treeSelect);
    //   console.log("333: ",this.departemntList);

    //   const readNodes = (nodes = [], arr = []) => {
    //     for (let item of nodes) {
    //       if (this.treeSelect.includes(item.id) && !item.child?.length) {
    //         arr.push(item)
    //       }
    //       if (item.child?.length) readNodes(item.child, arr)
    //     }
    //     return arr
    //   }
    //   return readNodes(this.departemntList)
    // }
  },
  watch: {
    treeSelect: {
      handler (val) {
        const readNodes = (nodes = [], arr = []) => {
          for (let item of nodes) {
            if (this.treeSelect.includes(item.id) && !item.child?.length) {
              arr.push(item)
            }
            if (item.child?.length) readNodes(item.child, arr)
          }
          return arr
        }
        this.selectDepartment = readNodes(this.departemntList)
        console.log("this.selectDepartmentthis.selectDepartment: ", this.selectDepartment);
      },
      deep: true
    },
  },
  methods: {

    delDepartment (item) {
      console.log("item: ",item);
      console.log("this.treeSelect: ",this.treeSelect);
      let findex = this.treeSelect.findIndex(val => {
        return val == item.id
      })
      console.log("findex: ",findex);
      this.treeSelect.splice(findex, 1)
      console.log("1111: ",this.treeSelect);
    }



    // // step--1
    // showMemberModal (type) {
    //   let tempArr = this.allTeacherList
    //   this.allTeacherList = []
    //   this.allTeacherList = tempArr
    //   if (type == 1) {
    //     this.puncherMemberModal = true
    //     this.ownerMemberModal = false
    //   }
    //   if (type == 2) {
    //     this.puncherMemberModal = false
    //     this.ownerMemberModal = true
    //   }
    // },
    // closeMemberModal () {
    //   this.puncherMemberModal = false
    //   this.ownerMemberModal = false
    // },


    // departmentSelect(e) {
    //   console.log("e: ",e);
    //   let departmentArr = []
    //   this.departemntList.forEach(item => {
    //     e.forEach(item1 => {
    //       if (item1 == item.userId) departemntList.push(item)
    //     })
    //   })
    //   this.departmentArr = departmentArr
    //   console.log("this.departmentArr: ", this.departmentArr)
    // },
  },
};
</script>
